<template>
	<view id="w-tag" :class="'tag-size-'+size">
		<view class="name">
			{{name}}
		</view>
		<view class="value">
			{{value}}
		</view>
	</view>
</template>

<script>
	export default {
		name:"w-tag",
		props:{
			name:{
				type:String,
			},
			value:{
				type:String,
			},
			size:{
				type:String,
				default:'default'
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
#w-tag.tag-size-default{
	@extend .flex,.font-size-12;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	border-radius: 8rpx;
	overflow: hidden;
	color: #151515;
	text-align: center;
	background-color: #F5F5F5;
	// border: 2rpx solid #A1FCD3;
	font-size: 20rpx;
	>.name{
		background-color: #A1FCD3;
		padding: 4rpx 8rpx;	
	}
	>.value{
		text-align:center;
		font-weight: 500;
		padding: 4rpx 8rpx;	
		color:#000;
	}
}
#w-tag.tag-size-yellow{
	@extend .flex,.font-size-12;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	border-radius: 8rpx;
	overflow: hidden;
	color: #151515;
	text-align: center;
	background-color: #5F5A60;
	// border: 2rpx solid #A1FCD3;
	font-size: 20rpx;
	>.name{
		background-color: #EFE1BE;
		padding: 4rpx 8rpx;	
	}
	>.value{
		text-align:center;
		font-weight: 500;
		padding: 4rpx 8rpx;	
		color:#fff;
	}
}
#w-tag.tag-size-mini{
	@extend .flex,.font-size-12;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		border-radius: 4rpx;
		overflow: hidden;
		text-align: center;
		background-color: #363636;
		// border: 2rpx solid #A1FCD3;
		font-size: 20rpx;
		>.name{
			background-color: #EEE1BE;
			padding: 4rpx 0 0 4rpx;	
			color: #261B17;
			width: 60rpx;
		}
		>.value{
			text-align:center;
			font-weight: 500;
			padding: 4rpx 8rpx;	
			color:#fff;
			border-radius: 0 4rpx 4rpx 0;
		}
}
#w-tag.tag-size-border{
	@extend .flex,.font-size-12,.flex-ai-center,.flex-js-center;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		border-radius: 16rpx;
		overflow: hidden;
		text-align: center;
		// min-width: 124rpx;
		padding: 2rpx 8rpx;
		// background-color: #363636;
		border: 2rpx solid #EFEFEF;
		// border: 2rpx solid #A1FCD3;
		font-size: 20rpx;
		color: #8F8F8F;
		text-align: center;
		>.name{
			// background-color: #EEE1BE;
			// padding: 4rpx 0 0 4rpx;	
			// color: #261B17;
			// width: 60rpx;
		}
		>.value{
			// text-align:center;
			// font-weight: 500;
			// padding: 4rpx 8rpx;	
			// color:#fff;
			// border-radius: 0 4rpx 4rpx 0;
		}
}
</style>